<!DOCTYPE html>
<!--// 此处需使用 thymeleaf 模板的加载方式-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>分区曲线详情</title>
    <link th:href="@{/css/base.css}" rel="stylesheet"/>
    <script th:src="@{/js/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/js/rem.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
   <!--<link rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script>
    <script type="text/javascript" src="js/rem.js" ></script>
    <script type="text/javascript" src="js/echarts.min.js" ></script>-->
    <style>
    	html,body{width: 100%;height: 100%;overflow: hidden;}
    	.titel1{font-size: 0.34rem;font-weight: bolder;margin-top:0.6rem;margin-left: 0.3rem;}
    	.time1{font-size: 0.18rem;margin-left: 0.3rem;margin-top: 20px;color: #9d9d9d;}
    </style>
   	
</head>
<body>
	<div class="box">
		<div class="titel1">计量分区<span class="Jiname"></span></span></div>
		<div class="time1"><span class="timeStart"></span>--<span class="timeEnd"></span></div>
		<div class="chart" id="chart" style="height: 300px;width: 320px;margin-left: 0.3rem;">
			
		</div>
	</div>
    <script  th:inline="javascript">
        var globalType =/*[[${type}]]*/ 'Sebastian';
        var globalList = /*[[${list}]]*/ 'Sebastian';
        var globalstart = /*[[${startTime}]]*/ 'Sebastian';
       var globalend =/*[[${endTime}]]*/ 'Sebastian';
       console.log(globalList);
//      var globalstartTime =/*[[${startTime}]]*/ 'Sebastian';
//      var globalendTime =/*[[${endTime}]]*/ 'Sebastian';
//      var globalorgId =/*[[${orgId}]]*/ 'Sebastian';
        
			
//			var time1 = "2018-08-20 17:50:51";
//			var time2 = "2018-09-18 14:13:14";
			$(".timeStart").html(globalstart);
			$(".timeEnd").html(globalend);
 			if(globalType == 1){
				$(".Jiname").html("产销差")
			}else if(globalType == 2){
				$(".Jiname").html("漏损量")
			}else if(globalType == 3){
				$(".Jiname").html("漏损率")
			}
			
			
			
	

		window.onload = function() {
			function times(timestamp){
				 var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		        var Y = date.getFullYear() + '-';
		        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
		        var D = date.getDate() + ' ';
		        var h = date.getHours() + ':';
		        var m = date.getMinutes() + ':';
		        var s = date.getSeconds();
		        return Y+M+D;
			}
			
			var datax = [];
			var datay = [];
			for(var i=0;i<globalList.length;i++){
         		var time = times(globalList[i].time);
         		
				datax.push(time);
				if(globalType==1){
					datay.push(globalList[i].flow);
				}else if(globalType==2){
					datay.push(globalList[i].ullage);
				}else if(globalType==3){
					datay.push(globalList[i].leakage);
				}
			}
         	if(globalType==1){
         		type = "产销差";
         	}else if(globalType==2){
         		type = "漏损量";
         	}else if(globalType==3){
         		type = "漏损率";
            }
			
			
                 	var dom = document.getElementById("chart");
		            var myChart = echarts.init(dom);
		            window.onresize = myChart.resize;  // 适应屏幕放大缩小
//               
			    	myChart.setOption({
			    		tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            lineStyle: {
					                color: '#57617B'
					            }
					        }
			   			},
						legend: {
			//			    icon: 'rect',
			//			    itemWidth: 14,
			//			    itemHeight: 5,
			//			    itemGap: 13,
			//			    data: ['管网系统'],
						    
						},
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
			             dataZoom: [//给x轴设置滚动条  
			                           {  
			                               start:0,//默认为0
			                               end: 10,
			                               type: 'slider',  
			                               show: true,  
			                               xAxisIndex: [0],  
			                               handleSize: 0,//滑动条的 左右2个滑动条的大小  
			                               height: 8,//组件高度  
			                               left: 50, //左边的距离  
			                               right: 40,//右边的距离  
			                               bottom: 26,//右边的距离  
			                               handleColor: '#ddd',//h滑动图标的颜色  
			                               handleStyle: {  
			                                   borderColor: "#cacaca",  
			                                   borderWidth: "1",  
			                                   shadowBlur: 2,  
			                                   background: "#ddd",  
			                                   shadowColor: "#ddd",  
			                               },  
			                               fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{  
			                                   //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变  
			                                   //给第一个设置0，第四个设置1，就是垂直渐变  
			                                   offset: 0,  
			                                   color: '#1eb5e5'  
			                               }, {  
			                                   offset: 1,  
			                                   color: '#5ccbb1'  
			                               }]),  
			                               backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色  
			                               showDataShadow: false,//是否显示数据阴影 默认auto  
			                               showDetail: false,//即拖拽时候是否显示详细数值信息 默认true  
			                              
			                               filterMode: 'filter'
			                           },  
			                           //下面这个属性是里面拖到  
			                           {  
			                               type: 'inside',  
			                               show: true,  
			                               xAxisIndex: [0],  
			                               start: 0,//默认为1  
			                               end: 50
			                           },  
			                       ],
					    xAxis: [{
					        type: 'category',
					        boundaryGap: false,		
					        data: datax,
					    }],
					    yAxis: [{
					        type: 'value',
					        splitLine:{ show:false },
					        axisTick: {
					            show: false
					        },
					        axisLine: {
					            lineStyle: {
					                color: '#9e6219'
					            }
					        },
					        axisLabel: {
					            margin: 10,
					            textStyle: {
					                fontSize: 14
					            }
					        },
					        splitLine: {
					            lineStyle: {
					                color: '#57617B'
					            }
					        }
					    }],
					    series: [{
							        name: type,
							        type: 'line',
							        smooth: true,
							        lineStyle: {
							            normal: {
							                width: 1
							            }
							        },
							        areaStyle: {
							            normal: {
							                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							                    offset: 0,
							                    color: 'rgba(137, 189, 27, 0.3)'
							                }, {
							                    offset: 0.8,
							                    color: 'rgba(137, 189, 27, 0)'
							                }], false),
							                shadowColor: 'rgba(0, 0, 0, 0.1)',
							                shadowBlur: 10
							            }
							        },
							        itemStyle: {
							            normal: {
							                color: 'rgb(137,189,27)'
							            }
							        },
					       			 data: datay,
					  	}]
					});
                 	
            
		}
		
		
//		var monthdata = [];
			
    	
	</script>
</body>
</html>